<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="1">
          <pie-chart-outlined />
          <router-link to="/staging"><span>工作台</span></router-link>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>文章管理</span>
            </span>
          </template>
          <router-link to="/all/articles"
            ><a-menu-item key="2">所有文章</a-menu-item></router-link
          >
          <router-link to="/classification/management"
            ><a-menu-item key="3">分类管理</a-menu-item></router-link
          >
          <router-link to="/label/management"
            ><a-menu-item key="4">标签管理</a-menu-item></router-link
          >
        </a-sub-menu>
        <a-menu-item key="5">
          <switcher-outlined />
          <router-link to="/page"><span>页面管理</span></router-link>
        </a-menu-item>
        <a-menu-item key="6">
          <wallet-outlined />
          <router-link to="/knowledge/booklet"
            ><span>知识小册</span></router-link
          >
        </a-menu-item>
        <a-menu-item key="7">
          <star-outlined />
          <router-link to="/poster"><span>海报管理</span></router-link>
        </a-menu-item>
        <a-menu-item key="8">
          <message-outlined />
          <router-link to="/comment"><span>评论管理</span></router-link>
        </a-menu-item>
        <a-menu-item key="9">
          <loading-outlined />
          <router-link to="/mail"><span>邮件管理</span></router-link>
        </a-menu-item>
        <a-menu-item key="10">
          <smile-outlined :rotate="180" />
          <router-link to="/file/management"><span>文件管理</span></router-link>
        </a-menu-item>
        <a-menu-item key="11">
          <sync-outlined spin />
          <router-link to="/search/secords"><span>搜索记录</span></router-link>
        </a-menu-item>
        <a-menu-item key="12">
          <smile-outlined />
          <router-link to="/access/statistics"
            ><span>访问统计</span></router-link
          >
        </a-menu-item>
        <a-menu-item key="13">
          <setting-filled />
          <router-link to="/user/management"><span>用户管理</span></router-link>
        </a-menu-item>
        <a-menu-item key="14">
          <home-outlined />
          <router-link to="/system/settings"><span>系统设置</span></router-link>
        </a-menu-item></a-menu
      >
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0 24px">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px'
        }"
      >
        Content
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  StarOutlined,
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  LoadingOutlined,
  MessageOutlined,
  WalletOutlined,
  SwitcherOutlined,
  GoogleOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  components: {
    VideoCameraOutlined,
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined
    // PieChartOutlined
    // DesktopOutlined,
    // UserOutlined,
    // TeamOutlined,
    // FileOutlined,
    // StarOutlined,
    // HomeOutlined,
    // SettingFilled,
    // SmileOutlined,
    // SyncOutlined,
    // LoadingOutlined,
    // MessageOutlined,
    // WalletOutlined,
    // SwitcherOutlined,
    // GoogleOutlined
  },
  setup() {
    return {
      selectedKeys: ref<string[]>(['1']),
      collapsed: ref<boolean>(false)
    }
  }
})
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>
